<template>
    <div>
        <BasicTable :tableData="dataList.list" :searchList="searchList" :pagination="dataList.pagination"
            :tableCrudList=tableCrudList :columnData="columnData" @reset="reset" @search="search"
            @handleCurrentChange="handleCurrentChange" :crudList=crudList @handleSizeChange="handleSizeChange"
            @operate="operate" />
        <BasicDialog ref="BasicDialog" :basicDlgVisible="basicDlgVisible" :basicDlgTitle="basicDlgTitle"
            :basicDlgFormList="basicDlgFormList" :basicDlgRules="basicDlgRules"
            @basicDlgHandleClose="basicDlgHandleClose" :basicDlgFormData="basicDlgFormData" basicDlgWidth="70%"
            :basicDlgAction="basicDlgAction" @basicDlgInsert="basicDlgInsert" @basicDlgEdit="basicDlgEdit"
            @basicDlgReset="basicDlgReset" />
    </div>
</template>



<script>
import { getGoodsClasstList, deleteGoodsClass, editGoodsClass, insertGoodsClass } from '@/api/goodsClass/goodsClass'
import BasicDialog from '@/components/BasicComponents/BasicDialog.vue'
import BasicTable from '@/components/BasicComponents/BasicTable.vue'
export default {
    name: "GoodsClass",
    components: {
        BasicTable, BasicDialog
    },
    data() {
        return {
            //数据
            dataList: {
                pagination: {
                    currentPage: null,
                    pageSize: null,
                    total: null
                },
                list: []
            },

            //其它操作按钮数据
            crudList: [{
                name: "新增",
                type: "primary",
                icon: "",
                key: 'insert'
            },
            {
                name: "批量删除",
                type: "danger",
                icon: "",
                key: "deleteMany"

            }],
            //表格内的操作按钮
            tableCrudList: [{
                name: "编辑",
                type: "primary",
                icon: "",
                key: 'edit'
            },
            {
                name: "删除",
                type: "danger",
                icon: "",
                key: "delete"

            }],
            //搜索数据
            searchList: [
                {
                    name: "日期范围",
                    type: "datetimerange",
                    key: "dataPicker",
                },
                {
                    name: "类型名称",
                    type: "input",
                    key: "className",
                    placeholder: "请输入名称",
                },

            ],
            //表格数据
            tableData: [],
            //表格列的数据
            columnData: [
                { type: "selection", width: "50px" },
                { type: "index", width: "50px" },
                {
                    type: "text",
                    label: "类型名称",
                    prop: "className",
                    width: "150px",
                }, {
                    type: "text",
                    label: "创建人",
                    prop: "addUserName",
                    width: "150px",
                }, {
                    type: "text",
                    label: "创建时间",
                    prop: "addTime",
                    width: "150px",
                }, {
                    type: "text",
                    label: "编辑人",
                    prop: "editUserName",
                    width: "150px",
                }, {
                    type: "text",
                    label: "编辑时间",
                    prop: "editTime",
                    width: "150px",
                }
            ],
            basicDlgVisible: false,
            basicDlgTitle: '',
            basicDlgRules: {
                className: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' },
                    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
                ],

            },
            basicDlgFormList: [
                {
                    name: "类型名称",
                    type: "input",
                    key: "className",
                    placeholder: "请输入类型名称",
                },

            ],
            //弹框数据
            basicDlgFormData: {},
            //弹框性质
            basicDlgAction: '',

        }
    },
    created() {
        //获取产品信息
        this.getData()

    },
    mounted() { },
    methods: {
        basicDlgReset() {
            this.$refs.BasicDialog.$refs.basicDlgForm.clearValidate();
            this.basicDlgFormData = {}

        },
        //弹框编辑按钮
        async basicDlgEdit(data) {
            await editGoodsClass(data).then(res => {
                console.log(res)
                if (res.data.code == 200) {
                    this.$message({
                        message: res.data.message,
                        type: 'success'
                    })
                    this.basicDlgHandleClose()
                    this.getData()
                }
                else {
                    this.$message.error(res.data.message);
                }
            })
        },
        //弹框添加按钮
        async basicDlgInsert(data) {
            await insertGoodsClass(data).then(res => {
                if (res.data.code == 200) {
                    this.$message({
                        message: res.data.message,
                        type: 'success'
                    })
                    this.basicDlgHandleClose()
                    this.getData()
                }
                else {
                    this.$message.error(res.data.message);
                }
            })
        },

        //重置
        reset(e) {
            this.getData(e)
        },
        //搜索
        search(e) {
            this.getData(e)
        },
        //改变页面的显示数据数量
        handleSizeChange(e) {
            this.getData(e)
        },
        handleCurrentChange(e) {
            this.getData(e)
        },
        //操作
        async operate(btnType, data) {

            //新增
            if (btnType.key == "insert") {
                this.basicDlgVisible = true
                this.basicDlgTitle = '新增'
                this.basicDlgAction = 'insert'
            }
            //编辑
            if (btnType.key == "edit") {
                this.basicDlgVisible = true
                this.basicDlgTitle = '编辑'
                this.basicDlgAction = 'edit'
                this.basicDlgFormData = data
            }
            //删除
            if (btnType.key == "delete") {
                await deleteGoodsClass({ tyIdList: [data.tyId] }).then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        })
                        this.getData()
                    }
                    else {
                        this.$message.error(res.data.message);
                    }
                })
            }
            //批量删除
            if (btnType.key == "deleteMany") {
                if (data.length == 0) {
                    this.$message.error("请勾选数据！");
                    return
                }
                let tyIdList = data.map(it => {
                    return it.tyId
                })
                await deleteGoodsClass({tyIdList}).then(res => {
                    console.log(res)
                    if (res.data.code == 200) {
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        })
                        this.getData()
                    }
                    else {
                        this.$message.error(res.data.message);
                    }
                })
            }

        },
        //获取数据
        async getData(e) {
            await getGoodsClasstList(e || {}).then(res => {
                if (res.data.code == "200") {
                    this.dataList = res.data.data

                } else {
                    this.$message.error(res.data.message);
                }
                console.log(this.dataList)
            })
        },
        //关闭弹窗
        basicDlgHandleClose() {
            this.basicDlgVisible = false
            this.$refs.BasicDialog.$refs.basicDlgForm.clearValidate();
            this.basicDlgFormData = {}

        }
    }
}
</script>